<template>
  <div>
      <div class="box">
          <pic-zoom :url="imgurl" :scale="3"></pic-zoom>
      </div>
      <div class="list">
          <ul>
            <li v-for="(item,index) in imagesList" 
                :key="index" 
                @mouseenter="changeImage(index)"
            >
                 <img :src="item" />
            </li>
          </ul>
      </div>
  </div>
</template>
<script>
  import PicZoom from "vue-piczoom"
    export default {
        name: "FooterShow",
        data(){
            return{
              imgurl:require("../assets/0.jpg"),
               imagesList:[
                 require("../assets/0.jpg"),
                 require("../assets/1.jpg"),
                 require("../assets/2.jpg"),
               ]
            }
         },
        components:{
          PicZoom
        },
      methods:{
        changeImage:function (index) {
             this.imgurl=this.imagesList[index];
        }
      }

    }
</script>
<style scoped>
.box{
  width: 400px;
  height: 320px;
}
.list{
  width: 400px;
  height: 130px;
}
  .list ul{
    width: 400px;
    display: flex;
    justify-content: space-around;
  }
  .list ul li{
    width:120px;
    height: 90px;
    background-color: white;
    margin-top: 15px;
    list-style: none;
  }
  .list ul li img{
    width: 120px;
    height: 90px;
  }
</style>